frontend/pages/e/[uuid]/prices.tsx (view raw)
1import {PropsWithChildren} from 'react';
2import {
3 EventByUuidDocument,
4 Module,
5 ModuleDocument,
6 Enum_Userspermissionsuser_Lang as SupportedLocales,
7} from '../../../generated/graphql';
8import EventLayout, {TabComponent} from '../../../layouts/Event';
9import useEventStore from '../../../stores/useEventStore';
10import {Box, Container, useTheme} from '@mui/material';
11import Head from 'next/head';
12import {useSession} from 'next-auth/react';
13import pageUtils from '../../../lib/pageUtils';
14import {getLocaleForLang} from '../../../lib/getLocale';
15
16interface Props {
17 modulesSettings?: Module;
18 eventUUID: string;
19 announcement?: string;
20}
21
22const Page = (props: PropsWithChildren<Props>) => {
23 return <EventLayout {...props} Tab={PricesPage} />;
24};
25
26const PricesPage: TabComponent<Props> = ({modulesSettings}) => {
27 const theme = useTheme();
28 const event = useEventStore(s => s.event);
29 const session = useSession();
30 const profile = session?.data?.profile;
31
32 const carosterPlusActivated =
33 modulesSettings?.caroster_plus_enabled &&
34 event?.enabled_modules?.includes('caroster-plus');
35
36 if (!event && !carosterPlusActivated) return null;
37
38 return (
39 <Box position="relative">
40 <Head>
41 <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
42 </Head>
43 <Container
44 sx={{
45 p: 4,
46 mt: 6,
47 mb: 11,
48 mx: 0,
49 [theme.breakpoints.down('md')]: {
50 p: 2,
51 mt: 13,
52 },
53 }}
54 >
55 <Box mb={4}>
56 {modulesSettings && (
57 /* @ts-ignore */
58 <stripe-pricing-table
59 pricing-table-id={modulesSettings.caroster_plus_pricing_grid_id}
60 publishable-key={modulesSettings.caroster_plus_publishable_key}
61 client-reference-id={event.uuid}
62 customer-email={profile?.email}
63 />
64 )}
65 </Box>
66 </Container>
67 </Box>
68 );
69};
70
71export const getServerSideProps = pageUtils.getServerSideProps(
72 async (context, apolloClient) => {
73 const {uuid} = context.query;
74 const {host = ''} = context.req.headers;
75 let event = null;
76 let modulesSettings = null;
77
78 // Fetch event
79 try {
80 const {data} = await apolloClient.query({
81 query: EventByUuidDocument,
82 variables: {uuid},
83 });
84 event = data?.eventByUUID?.data;
85 } catch (error) {
86 return {
87 notFound: true,
88 };
89 }
90
91 // Fetch module settings
92 try {
93 const {data} = await apolloClient.query({
94 query: ModuleDocument,
95 variables: {locale: context.locale},
96 });
97 modulesSettings = data?.module?.data?.attributes || null;
98
99 if (!modulesSettings?.caroster_plus_pricing_grid_id) {
100 console.warn(
101 'Module settings are not set for locale: ',
102 context.locale,
103 ' fallback to English'
104 );
105 const {data: enData} = await apolloClient.query({
106 query: ModuleDocument,
107 variables: {locale: SupportedLocales['en']},
108 });
109 modulesSettings = enData?.module?.data?.attributes || null;
110 }
111 } catch (error) {
112 console.error("Can't fetch config for module: ", error);
113 }
114
115 const description = await getLocaleForLang(
116 event?.attributes?.lang,
117 'meta.description'
118 );
119
120 return {
121 props: {
122 modulesSettings,
123 eventUUID: uuid,
124 metas: {
125 title: event?.attributes?.name || '',
126 description,
127 url: `https://${host}${context.resolvedUrl}`,
128 },
129 },
130 };
131 }
132);
133
134export default Page;